<template>
  <div>
    <h1>演示翻译</h1>
    <el-button @click="locale='zh'">中文</el-button>
    <el-button @click="locale='en'">en</el-button>
    <div>{{t('sayHi')}}</div>
    <div>{{t('zaoan')}}</div>
  </div>
</template>

<script>

export default {
  data(){
    return{
       // 1. 记录当前的语言设定
      locale: 'zh',
      // 2. 准备翻译的信息
      messages: {
        zh: {
          sayHi: '你好',
          zaoan: '早安管理员, 欢迎回来'
        },
        en: {
          sayHi: 'Hello',
          zaoan: 'Good Morning, Guanliyuan, welcome back'
        }
      }
    }
  },
  methods:{
    t(val){
      // 1. 取出字典
      const zidian = this.messages[this.locale]
// 2. 返回翻译
return zidian[val]
    }
  }
}
</script>

<style>

</style>
